<template>
    <div>
        <h2>爸爸在哪儿</h2>
        <h3>{{ msg }}</h3>
        <button @click.stop="changeFatherMsg">点击修改父组件的MSG</button>
        <hr>
        <MyChildBox></MyChildBox>

        <hr>

        <Suspense>
            <template #default>
                <SusCom></SusCom>
            </template>
            <template #fallback>
                <h2>{{ info }}</h2>
            </template>
        </Suspense>


    </div>
</template>

<script setup>
import MyChildBox from './MyChildBox.vue'
import SusCom from './SusCom.vue'
import bus from '../tools/bus'
import { onErrorCaptured, ref } from 'vue'

let info = ref("您的组件正在加载中，请您稍等...")
onErrorCaptured(()=>{
    console.log("子组件内部出现了错误！");
    info.value = "您的网络请求出现了异常！"
})

// 在 Vue3 中直接完全使用 Vue2 的语法接收 props
// export default {
//     props: ['msg']
// }

// 在 Vue3 中调用 defineComponent hooks 类似 Vue2 一样调用 props
// import { defineComponent } from 'vue';
// export default defineComponent({
//     props: {
//         msg: {
//             type: String,
//             default: '蜡笔小新'
//         }
//     }
// })

// 在 标准的 Vue3 纯 Hooks 编程中，没有直接写属性的方法了，我们需要使用 defineProps Hooks 直接接收
import { defineProps, getCurrentInstance } from 'vue';
// const props = defineProps(['msg'])
const props = defineProps({
    msg: {
        type: String,
        default: "蜡笔小新"
    }
})
console.log(props);

// 上下文虽然可以使用，但是 在 Vue3 中 除非极其特殊的情况，否则不建议使用
const { ctx } = getCurrentInstance();
// 这里不需要传参，虽然没有报错，一切都很正常，但是不需要传参，不要和 props 混为一谈
// const emits = defineEmits(['change-msg'])
const emits = defineEmits()

const changeFatherMsg = () => {
    // 没有了 this ，我们可以尝试使用 ctx 上下文
    // ctx.$emit("change-msg")
    emits('change-msg')
    bus.emit("mittGetInfo", "呵呵哈哈呵呵")
}

</script>

<style lang="scss" scoped></style>